import React from "react";
import { useState, useEffect } from "react";
import "./index.scss";

type InputProps = {
  type?: React.HTMLInputTypeAttribute;
  value: string;
  onChange?: (val: string) => void;
};

export const Input = (props: InputProps) => {
  const { type = "text", value, onChange } = props;
  const [val, setVal] = useState(value);

  useEffect(() => {
    setVal(value);
  }, [value]);

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    const { value } = e.target;
    setVal(value);
    onChange?.(value);
  };

  return (
    <input
      className="l-input"
      type={type}
      value={val}
      onChange={handleChange}
    ></input>
  );
};
